window.onload = function () {
    var $ = go.GraphObject.make;    // 创建画布

    var myDiagram =
        $(go.Diagram, "myDiagramDiv",   // 必须与Div元素的id属性一致
            {
                isReadOnly: true,//只读
                initialContentAlignment: go.Spot.Center, // 居中显示内容
                "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,//鼠标滚轮事件禁止
                "undoManager.isEnabled": true, // 启用Ctrl-Z和Ctrl-Y撤销重做功能
                allowDrop: true,  // 是否允许从Palette面板拖入元素
                "LinkDrawn": showLinkLabel,  // 每次画线后调用的事件：为条件连线加上标签，该方法再后面定义
                "LinkRelinked": showLinkLabel,  // 每次重画线后调用的事件：同上LinkDrawn
                scrollsPageOnFocus: false,  // 图选中时页面不会滚动
                autoScrollRegion: 0,
                hasVerticalScrollbar: false,
                hasHorizontalScrollbar: false
            });

    // 当图有改动时，在页面标题后加*，且启动保存按钮
    myDiagram.addDiagramListener("Modified", function (e) {
        var button = document.getElementById("SaveButton");
        if (button) {
            button.disabled = !myDiagram.isModified;
        }

        var idx = document.title.indexOf("*");
        if (myDiagram.isModified) {
            if (idx < 0) document.title += "*";
        } else {
            if (idx >= 0) document.title = document.title.substr(0, idx);
        }
    });

    // 鼠标点击事件
    myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
        //拿到点击的节点的order
        var clickKey = e.subject.part.data.key;
        if (clickKey != undefined && clickKey != null) {
            if (beforeSteps.indexOf(clickKey) != -1 && clickKey != 1) {
                window.setTimeout(function () {
                    showNodeInfo(clickKey);
                }, 100);
            }
        }
    });

    function showNodeInfo(clickKey) {
        //查询后台数据
        var littlePageData = getLittlePageData(clickKey);
        if (littlePageData == null) {
            showLittleDiv(littlePageData);
        } else {
            var url = '';
            var data = {};
            $.ajax({
                url: url,
                data: data,
                dataType: "json",
                type: "get",
                async: false,
                xhrFields: {withCredentials: true},
                success: function (data) {
                    if (data.status == "1" && data.result != null) {
                        //小div展示数据
                        showLittleDiv(data);
                        setLittlePageDataArr(order, data);
                    }
                },
                error: function (data) {
                    alert("数据库查询失败");
                }
            });
        }
    }

    function setLittlePageDataArr(order, data) {
        littlePageDataArr[order - 1] = data;
    }

    function getLittlePageData(clickKey) {
        var clickOrder = getOrderByKey(clickKey);
        for (var i in orderArr) {
            if (littlePageDataArr[i - 1] != null) {
                return littlePageDataArr[i - 1];
            }
        }
        return null;
    }

    function getOrderByKey(key) {
        for (var i in nowNodeDataArray) {
            if (nowNodeDataArray[i].key == key) {
                return nowNodeDataArray[i].order;
            }
        }
    }

    var showTop = null;
    var showLeft = null;

    function showLittleDiv(littlePageData) {
        showDivEle.style.top = showTop + "px";
        showDivEle.style.left = showLeft + "px";
        setLittlePageData(littlePageData);
        showDivEle.style.display = "";
    }

    function setLittlePageData(littlePageData) {
        if (!littlePageData) {
            return;
        }
        for (var i in littlePageData) {
            var fieldEle = document.getElementById(i);
            fieldEle.val(littlePageData[i]);
        }
    }


    // 设置节点位置风格，并与模型"loc"属性绑定，该方法会在初始化各种节点模板时使用
    function nodeStyle() {
        return [
            // 将节点位置信息 Node.location 同节点模型数据中 "loc" 属性绑定：
            // 节点位置信息从 节点模型 "loc" 属性获取, 并由静态方法 Point.parse 解析.
            // 如果节点位置改变了, 会自动更新节点模型中"loc"属性, 并由 Point.stringify 方法转化为字符串
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            {
                // 节点位置 Node.location 定位在节点的中心
                locationSpot: go.Spot.Center
            }
        ];
    }

    // 创建"port"方法，"port"是一个透明的长方形细长图块，在每个节点的四个边界上，如果鼠标移到节点某个边界上，它会高亮
    // "name": "port" ID，即GraphObject.portId,
    // "align": 决定"port" 属于节点4条边的哪条
    // "spot": 控制连线连入/连出的位置，如go.Spot.Top指, go.Spot.TopSide
    // "output" / "input": 布尔型，指定是否允许连线从此"port"连入或连出
    function makePort(name, align, spot, output, input) {
        // 如果是上、下边界，则是水平"port"
        var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);

        return $(go.Shape,
            {
                fill: "transparent",            // 默认透明不现实
                strokeWidth: 0,                 // 无边框
                width: horizontal ? NaN : 8,    // 垂直"port"则8像素宽
                height: !horizontal ? NaN : 8,  // 水平"port"则8像素
                alignment: align,               // 同其节点对齐
                stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical), // 自动同其节点一同伸缩
                portId: name,                   // 声明ID
                fromSpot: spot,                 // 声明连线头连出此"port"的位置
                fromLinkable: output,           // 布尔型，是否允许连线从此"port"连出
                toSpot: spot,                   // 声明连线尾连入此"port"的位置
                toLinkable: input,              // 布尔型，是否允许连线从此"port"连出
                cursor: "pointer",              // 鼠标由指针改为手指，表示此处可点击生成连线
                mouseEnter: function (e, port) { // 鼠标移到"port"位置后，高亮
                    if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
                },
                mouseLeave: function (e, port) { // 鼠标移出"port"位置后，透明
                    port.fill = "transparent";
                }
            });
    }

    // 图形上的文字风格
    function textStyle() {
        return {
            font: "11pt Helvetica, Arial, sans-serif",
            stroke: "whitesmoke"
        }
    }


    // 定义步骤（默认类型）节点的模板
    myDiagram.nodeTemplateMap.add("",  // 默认类型
        $(go.Node,
            "Table", nodeStyle(),
            // 步骤节点是一个包含可编辑文字块的长方形图块
            $(go.Panel, "Auto",
                $(go.Shape, "Rectangle", "RoundedRectangle",
                    {fill: "#00A9C9", strokeWidth: 0},
                    new go.Binding("figure", "figure"), new go.Binding("fill", "bgcolor")),
                $(go.TextBlock, textStyle(),
                    {
                        margin: 8,
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit, // 尺寸自适应
                        editable: true  // 文字可编辑
                    },
                    new go.Binding("text").makeTwoWay())  // 双向绑定模型中"text"属性
            ),

            // 上、左、右可以入，左、右、下可以出
            // "Top"表示中心，"TopSide"表示上方任一位置，自动选择
            makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
            makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
            makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
            makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false),
        ));


    // 定义条件节点的模板
    myDiagram.nodeTemplateMap.add("Conditional",
        $(go.Node, "Table", nodeStyle(),
            // 条件节点是一个包含可编辑文字块的菱形图块
            $(go.Panel, "Auto",
                $(go.Shape, "Diamond",
                    {fill: "#00A9C9", strokeWidth: 0},
                    new go.Binding("figure", "figure")),
                $(go.TextBlock, textStyle(),
                    {
                        margin: 8,
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit, // 尺寸自适应
                        editable: true  // 文字可编辑
                    },
                    new go.Binding("text").makeTwoWay())
            ),

            // 上、左、右可以入，左、右、下可以出
            makePort("T", go.Spot.Top, go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
        )
    );

    // 定义开始节点的模板
    myDiagram.nodeTemplateMap.add("Start",
        $(go.Node, "Table", nodeStyle(),
            // 开始节点是一个圆形图块，文字不可编辑
            $(go.Panel, "Auto",
                $(go.Shape, "Circle",
                    {minSize: new go.Size(40, 40), fill: "#79C900", strokeWidth: 0}),
                $(go.TextBlock, "Start", textStyle(),
                    new go.Binding("text"))
            ),

            // 左、右、下可以出，但都不可入
            makePort("L", go.Spot.Left, go.Spot.Left, true, false),
            makePort("R", go.Spot.Right, go.Spot.Right, true, false),
            makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
        )
    );

    // 定义结束节点的模板
    myDiagram.nodeTemplateMap.add("End",
        $(go.Node, "Table", nodeStyle(),
            // 结束节点是一个圆形图块，文字不可编辑
            $(go.Panel, "Auto",
                $(go.Shape, "Circle",
                    {minSize: new go.Size(40, 40), fill: "#DC3C00", strokeWidth: 0}),
                $(go.TextBlock, "End", textStyle(),
                    new go.Binding("text"))
            ),

            // 上、左、右可以入，但都不可出
            makePort("T", go.Spot.Top, go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, go.Spot.Left, false, true),
            makePort("R", go.Spot.Right, go.Spot.Right, false, true)
        )
    );

    // 定义注释节点的模板
    myDiagram.nodeTemplateMap.add("Comment",
        $(go.Node, "Auto", nodeStyle(),
            // 注释节点是一个包含可编辑文字块的文件图块
            $(go.Shape, "File",
                {fill: "#EFFAB4", strokeWidth: 0}),
            $(go.TextBlock, textStyle(),
                {
                    margin: 5,
                    maxSize: new go.Size(200, NaN),
                    wrap: go.TextBlock.WrapFit, // 尺寸自适应
                    textAlign: "center",
                    editable: true,  // 文字可编辑
                    font: "bold 12pt Helvetica, Arial, sans-serif",
                    stroke: '#454545'
                },
                new go.Binding("text").makeTwoWay())
            // 不支持连线入和出
        ));


    // 初始化连接线的模板
    myDiagram.linkTemplate =
        $(go.Link,  // 所有连接线
            {
                routing: go.Link.AvoidsNodes,   // 连接线避开节点
                curve: go.Link.JumpOver,
                corner: 5, toShortLength: 4,    // 直角弧度，箭头弧度
                relinkableFrom: true,   // 允许连线头重设
                relinkableTo: true,     // 允许连线尾重设
                reshapable: true,       // 允许线形修改
                resegmentable: true,    // 允许连线分割（折线）修改
                // 鼠标移到连线上后高亮
                mouseEnter: function (e, link) {
                    link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
                },
                mouseLeave: function (e, link) {
                    link.findObject("HIGHLIGHT").stroke = "transparent";
                },
                selectionAdorned: false
            },
            new go.Binding("points").makeTwoWay(),  // 双向绑定模型中"points"数组属性
            $(go.Shape,  // 隐藏的连线形状，8个像素粗细，当鼠标移上后显示
                {isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT"}
            ),
            $(go.Shape,  // 连线规格（颜色，选中/非选中，粗细）
                {isPanelMain: true, stroke: "gray", strokeWidth: 2},
                new go.Binding("stroke", "isSelected", function (sel) {
                    return sel ? "dodgerblue" : "gray";
                }).ofObject()
            ),
            $(go.Shape,  // 箭头规格
                {toArrow: "standard", strokeWidth: 0, fill: "gray"}
            ),
            $(go.Panel, "Auto",  // 连线标签，默认不显示
                {visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
                new go.Binding("visible", "visible").makeTwoWay(),  // 双向绑定模型中"visible"属性
                $(go.Shape, "RoundedRectangle",  // 连线中显示的标签形状
                    {fill: "#F8F8F8", strokeWidth: 0}),
                $(go.TextBlock, "是",  // 连线中显示的默认标签文字
                    {
                        textAlign: "center",
                        font: "10pt helvetica, arial, sans-serif",
                        stroke: "#333333",
                        editable: true
                    },
                    new go.Binding("text").makeTwoWay())  // 双向绑定模型中"text"属性
            )
        );

    // 此事件方法由整个画板的LinkDrawn和LinkRelinked事件触发
    // 如果连线是从”conditional"条件节点出发，则将连线上的标签显示出来
    function showLinkLabel(e) {
        var label = e.subject.findObject("LABEL");
        if (label !== null) {
            label.visible = (e.subject.fromNode.data.category === "Conditional");
        }
    }

    // 临时的连线（还在画图中），包括重连的连线，都保持直角
    myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

    // 将go模型以JSon格式保存在文本框内
    document.getElementById("saveButton").addEventListener("click", function () {
        document.getElementById("mySavedModel").value = myDiagram.model.toJson();
        myDiagram.isModified = false;
    });

    // 读取文本框内JSon格式的内容，并转化为gojs模型
    document.getElementById("loadButton").addEventListener("click", function () {
        myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    });

    // 在新窗口中将图形转化为SVG，并分页打印
    document.getElementById("printButton").addEventListener("click", function () {
        var svgWindow = window.open();
        if (!svgWindow) return;  // 创建新窗口失败
        var printSize = new go.Size(700, 960);
        var bnds = myDiagram.documentBounds;
        var x = bnds.x;
        var y = bnds.y;
        while (y < bnds.bottom) {
            while (x < bnds.right) {
                var svg = myDiagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize});
                svgWindow.document.body.appendChild(svg);
                x += printSize.width;
            }
            x = bnds.x;
            y += printSize.height;
        }
        setTimeout(function () {
            svgWindow.print();
        }, 1);
    });

    var initModelJson =
        {
            "class": "go.GraphLinksModel",
            "linkFromPortIdProperty": "fromPort",
            "linkToPortIdProperty": "toPort",
            "nodeDataArray": [
                {"category": "Start", "text": "开始", "key": 1, "loc": "-178 3", "bgcolor": "rgb(86, 183, 112)"},
                {
                    "order": "1",
                    "text": "草稿\n已新建/派发客服系统",
                    "key": 2,
                    "loc": "-177.9999999999999 111.99999999999997",
                    "bgcolor": "rgb(86, 183, 112)"
                },
                {
                    "order": "2",
                    "text": "电话预约",
                    "key": -11,
                    "loc": "148.00000000000006 104.00000000000001",
                    "bgcolor": "rgb(86, 183, 112)"
                },
                {
                    "order": "3",
                    "text": "现场开通\n现场开通组",
                    "key": -9,
                    "loc": "535 107.00000000000016",
                    "bgcolor": "rgb(225, 72, 98)"
                },
                {
                    "order": "4",
                    "text": "归档\n归档人",
                    "key": -7,
                    "loc": "897.0000000000001 115",
                    "bgcolor": "rgb(225, 72, 98)"
                },
                {
                    "order": "5",
                    "text": "改约\n电话预约组",
                    "key": -10,
                    "loc": "316.99999999999994 220.00000000000009",
                    "bgcolor": "rgb(74, 147, 205)"
                },
                {
                    "order": "6",
                    "text": "退单审核",
                    "key": -12,
                    "loc": "582 286.99999999999994",
                    "bgcolor": "rgb(225, 72, 98)"
                },
                {
                    "order": "7",
                    "text": "现场操作\n现场操作人",
                    "color": "red",
                    "bgcolor": "rgb(225, 72, 98)",
                    "key": -5,
                    "loc": "384 353.9999999999997"
                },
                {
                    "order": "8",
                    "category": "End",
                    "text": "结束",
                    "key": 6,
                    "loc": "896.9999999999995 417.9999999999999",
                    "bgcolor": "rgb(225, 72, 98)"
                }
            ],
            "linkDataArray": [
                {
                    "from": -11,
                    "to": -9,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [185.31997680664068, 98.6874252319336, 203.31997680664068, 98.6874252319336, 337.8350028991699, 98.6874252319336, 337.8350028991699, 99.04151713053402, 472.3500289916992, 99.04151713053402, 490.3500289916992, 99.04151713053402]
                },
                {
                    "from": -7,
                    "to": 6,
                    "fromPort": "B",
                    "toPort": "T",
                    "points": [897.0000000000001, 138.87544860839841, 897.0000000000001, 148.87544860839841, 897.0000000000001, 267.7836629645767, 896.9999999999994, 267.7836629645767, 896.9999999999994, 386.691877320755, 896.9999999999994, 396.691877320755]
                },
                {
                    "from": -11,
                    "to": -10,
                    "fromPort": "B",
                    "toPort": "L",
                    "points": [135.56000773111987, 119.93772430419924, 135.56000773111987, 137.93772430419924, 135.56000773111987, 220.00000000000009, 198.95501836140951, 220.00000000000009, 262.35002899169916, 220.00000000000009, 272.35002899169916, 220.00000000000009]
                },
                {
                    "from": -11,
                    "to": -12,
                    "fromPort": "B",
                    "toPort": "L",
                    "points": [160.43999226888027, 119.93772430419924, 160.43999226888027, 129.93772430419924, 160.43999226888027, 286.99999999999994, 347.5600077311198, 286.99999999999994, 534.6800231933594, 286.99999999999994, 544.6800231933594, 286.99999999999994]
                },
                {
                    "from": -12,
                    "to": -7,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [619.3199768066406, 286.99999999999994, 629.3199768066406, 286.99999999999994, 743.1649971008301, 286.99999999999994, 743.1649971008301, 122.95848286946612, 857.0100173950196, 122.95848286946612, 867.0100173950196, 122.95848286946612]
                },
                {
                    "from": -5,
                    "to": -7,
                    "fromPort": "R",
                    "toPort": "R",
                    "points": [428.64997100830095, 353.9999999999999, 438.64997100830095, 353.9999999999999, 936.9899826049806, 353.9999999999999, 936.9899826049806, 234.49999999999994, 936.9899826049806, 114.99999999999999, 926.9899826049806, 114.99999999999999]
                },
                {
                    "from": -9,
                    "to": -7,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [579.6499710083008, 107.00000000000016, 589.6499710083008, 107.00000000000016, 723.3299942016602, 107.00000000000016, 723.3299942016602, 107.04151713053385, 857.0100173950196, 107.04151713053385, 867.0100173950196, 107.04151713053385]
                },
                {
                    "from": 2,
                    "to": -11,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [-101.99354553222645, 104.04151713053382, -91.99354553222645, 104.04151713053382, 4.3432388305664915, 104.04151713053382, 4.3432388305664915, 104.00000000000001, 100.68002319335943, 104.00000000000001, 110.68002319335943, 104.00000000000001]
                },
                {
                    "from": 2,
                    "to": -5,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [-101.99354553222645, 119.95848286946611, -91.99354553222645, 119.95848286946611, -91.99354553222645, 119.95848286946611, -91.99354553222645, 353.9999999999999, 329.3500289916994, 353.9999999999999, 339.3500289916994, 353.9999999999999]
                },
                {
                    "from": 1,
                    "to": 2,
                    "fromPort": "B",
                    "toPort": "T",
                    "points": [-178, 24.308122679244644, -178, 34.30812267924465, -178, 56.21633703542309, -177.9999999999999, 56.21633703542309, -177.9999999999999, 78.12455139160153, -177.9999999999999, 88.12455139160153]
                },
                {
                    "from": -10,
                    "to": -9,
                    "fromPort": "R",
                    "toPort": "L",
                    "points": [361.6499710083007, 220.00000000000009, 371.6499710083007, 220.00000000000009, 426, 220.00000000000009, 426, 114.9584828694663, 480.3500289916992, 114.9584828694663, 490.3500289916992, 114.9584828694663]
                }
            ]
        }

    var pageInit = function () {
        var url = '';
        var data = {};
        $.ajax({
            url: url,
            data: data,
            dataType: "json",
            type: "get",
            async: false,
            xhrFields: {withCredentials: true},
            success: function (data) {
                if (data.status == "1" && data.result != null) {
                    initGoModel(data.result);
                }
            },
            error: function (data) {
                alert("数据库查询失败");
            }
        });
    };

    initGoModel = function (data) {
        // 初始化模型范例
        setInitModelJson(data);
        myDiagram.model = go.Model.fromJson(initModelJson);
        document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    };

    setInitModelJson = function (data) {
        try {
            var process1 = document.getElementsByClassName("round")[0];
            var process2 = document.getElementsByClassName("round")[1];
            var process3 = document.getElementsByClassName("round")[2];
            var passProcessColor = process1.currentStyle.backgroundColor;
            var nowProcessColor = process2.currentStyle.backgroundColor;
            var noPassProcessColor = process3.currentStyle.backgroundColor;
            if (data.length > 0) {
                var nowStep = data.state;
                var nowMark = data.message;
                var nowStep = 8;
                var arr = getBeforeSteps(nowStep);
                var nowKey = getNowKey(nowStep);
                for (var i in nowNodeDataArray) {
                    if (arr.indexOf(nowNodeDataArray[i].key) == -1) {
                        //不包含在此流程之前，所以是未进行流程
                        nowNodeDataArray[i].bgcolor = noPassProcessColor;
                    } else {
                        nowNodeDataArray[i].bgcolor = passProcessColor;
                    }
                    if (nowNodeDataArray[i].key == nowKey) {
                        nowNodeDataArray[i].bgcolor = nowProcessColor;
                    }
                }
            }
        } catch (e) {

        } finally {

        }
    }

    var beforeSteps = [];
    var oneStepBeforeKey = [];
    var initModel = initModelJson;
    var nowLinkDataArray = initModel.linkDataArray;
    var nowNodeDataArray = initModel.nodeDataArray;
    getBeforeSteps = function (step) {
        var nowKey = getNowKey(step);
        oneStepBeforeKey.push(nowKey);
        getBeforeKey(oneStepBeforeKey);
        return beforeSteps;
    }

    var getBeforeKey = function (oneStepBeforeKey) {
        var startKey = getStartKey();
        if (oneStepBeforeKey.length == 1 && oneStepBeforeKey[0] == startKey) {
            return;
        }
        var oneStepBeforeKeyCopy = oneStepBeforeKey;
        oneStepBeforeKey = [];
        for (var i in oneStepBeforeKeyCopy) {
            var aKey = oneStepBeforeKeyCopy[i];
            for (var j in nowLinkDataArray) {
                if (nowLinkDataArray[j].to == aKey) {
                    var fromKey = nowLinkDataArray[j].from;
                    if (oneStepBeforeKey.indexOf(fromKey) == -1) {
                        oneStepBeforeKey.push(fromKey);
                    }
                    if (beforeSteps.indexOf(fromKey) == -1) {
                        beforeSteps.push(fromKey);
                    }
                }
            }
        }
        getBeforeKey(oneStepBeforeKey);
    }

    getNowKey = function (step) {
        for (var i in nowNodeDataArray) {
            if (nowNodeDataArray[i].order == step) {
                return nowNodeDataArray[i].key;
            }
        }
    }

    getStartKey = function () {
        for (var i in nowNodeDataArray) {
            if (nowNodeDataArray[i].category == "Start") {
                return nowNodeDataArray[i].key;
            }
        }
    };

    HTMLElement.prototype.__defineGetter__("currentStyle", function () {
        return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });

    var littleEle = document.getElementById("showDiv");
    var bodyEle = document.getElementsByTagName("body")[0];
    bodyEle.onclick = function (e) {
        showTop = e.pageY;
        showLeft = e.pageX;
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;

        var littleWidth = littleEle.currentStyle.width;
        littleWidth = littleWidth.substring(0, littleWidth.length - 2);
        littleWidth = parseInt(littleWidth);
        var littleHeight = littleEle.currentStyle.height;
        littleHeight = littleHeight.substring(0, littleHeight.length - 2);
        littleHeight = parseInt(littleHeight);
        //如果点击在页面的后半部分，那么x坐标前移一个身位
        if (showLeft > pageWidth / 2) {
            showLeft -= littleWidth;
        }
        //如果点击在页面的后半部分，那么y坐标前移一个身位
        if (showTop > pageHeight / 2) {
            showTop -= littleHeight;
        }
    }

    var littleHeaderEle = document.getElementById("little-title-height");
    var isDraging = false;
    littleHeaderEle.addEventListener("mousedown", function (e) {
        var e = e || window.event;
        showLeft = e.pageX - littleEle.offsetLeft;
        showTop = e.pageY - littleEle.offsetTop;
        isDraging = true;
    });

    littleHeaderEle.onmouseover = function (e) {
        this.style.cursor = 'move';
    }

    document.onmousemove = function (e) {
        var e = e || window.event;
        var moveX = 0;
        var moveY = 0;
        if (isDraging == true) {
            moveX = e.pageX - showLeft;
            moveY = e.pageY - showTop;
            littleEle.style.left = moveX + "px";
            littleEle.style.top = moveY + "px";
        }
    }

    document.onmouseup = function (e) {
        isDraging = false;
    }

    var showDivEle = document.getElementById("showDiv");
    var closeLittlePageEle = document.getElementById("closeLittlePage");
    closeLittlePageEle.onclick = function (e) {
        showDivEle.style.display = "none";
    }

    var orderArr = [1, 2, 3, 4, 5, 6, 7];
    var markArr = ["", "", "", "", "", "", ""];
    var littlePageDataArr = [null, null, null, null, null, null, null];

    //pageInit();
    initGoModel([{state: 5, message: "正在进行安装"}]);
} // windows.onload


